<template>
    <div>
        <TypeNav />
        <!--list-content-->
        <div class="main">
            <div class="py-container">
                <SearchTag
                    :searchProps="searchParams.props"
                    :trademark="searchParams.trademark"
                    @deleteQueryTag="deleteQueryTag"
                    @deleteParamsTag="deleteParamsTag"
                    @deleteAttr="deleteAttr"
                    @deleteTrademark="deleteTrademark"
                ></SearchTag>
                <SearchSelector
                    @searchAttrValueList="searchAttrValueList"
                    @searchTrademark="searchTrademark"
                ></SearchSelector>
                <SearchDetails
                    :pageNo="searchParams.pageNo"
                    @searchListSort="searchListSort"
                    @changePageNo="changePageNo"
                ></SearchDetails>
                <SearchHot></SearchHot>
            </div>
        </div>
    </div>
</template>

<script>
import SearchTag from "@/pages/Search/components/SearchTag";
import SearchDetails from "@/pages/Search/components/SearchDetails";
import SearchSelector from "@/pages/Search/components/SearchSelector";
import SearchHot from "@/pages/Search/components/SearchHot";
import { mapActions } from "vuex";
export default {
    name: "Search",
    data() {
        return {
            searchParams: {
                category1Id: "",
                category2Id: "",
                category3Id: "",
                categoryName: "",
                keyword: "",
                order: "",
                pageNo: 1,
                pageSize: 10,
                props: [],
                trademark: "",
            },
        };
    },
    components: {
        SearchTag,
        SearchDetails,
        SearchSelector,
        SearchHot,
    },
    watch: {
        $route() {
            this.initSearchParams();
            this.getSearchList(this.searchParams);
        },
    },
    methods: {
        ...mapActions("search", ["getSearchList"]),
        // 初始化查询参数
        initSearchParams() {
            const {
                categoryName = "",
                category1Id = "",
                category2Id = "",
                category3Id = "",
            } = this.$route.query;
            const { searchKey = "" } = this.$route.params;
            // 合并参数
            this.searchParams = {
                ...this.searchParams,
                categoryName,
                category1Id,
                category2Id,
                category3Id,
                keyword: searchKey,
            };
        },
        searchTrademark(tm) {
            this.searchParams.trademark = `${tm.tmId}:${tm.tmName}`;
            this.initSearchParams();
            this.getSearchList(this.searchParams);
        },
        searchAttrValueList(attr) {
            const { attrId, attrName, attrValue } = attr;
            const str = `${attrId}:${attrValue}:${attrName}`;
            if (this.searchParams.props.includes(str)) return;
            this.searchParams.props.push(`${attrId}:${attrValue}:${attrName}`);
            this.getSearchList(this.searchParams);
        },
        //删除querytag标记的 自定义事件回调
        deleteQueryTag() {
            this.searchParams = {
                ...this.searchParams,
                category1Id: "",
                category2Id: "",
                category3Id: "",
                categoryName: "",
            };

            const params = this.$route.params;
            //重新发送请求
            // this.getSearchList(this.searchParams);
            this.$router.push({
                name: "search",
                params,
            });
        },
        // 删除paramsTag标记的 自定义事件回调
        deleteParamsTag() {
            this.searchParams = {
                ...this.searchParams,
                keyword: "",
            };
            const query = this.$route.query;

            //通知Header组件清空搜索框的值
            this.$bus.$emit("notifyHeader");

            //重新发送请求
            this.$router.push({
                name: "search",
                query,
            });
        },
        // 删除品牌tag的 自定义事件回调
        deleteTrademark() {
            //请求参数
            this.searchParams = {
                ...this.searchParams,
                trademark: "",
            };
            //重新发送请求
            this.getSearchList(this.searchParams);
        },
        // 删除 属性的tag的 自定义事件回调
        deleteAttr(tag) {
            //处理参数
            this.searchParams.props = this.searchParams.props.filter(
                (item) => tag != item,
            );
            //重新发送请求
            this.getSearchList(this.searchParams);
        },
        // 排序 自定义事件回调
        searchListSort(order) {
            this.searchParams.order = order;
            //重新发送请求
            this.getSearchList(this.searchParams);
        },
        // 点击页码翻页的 自定义事件回调函数
        changePageNo(page) {
            this.searchParams.pageNo = page;
            //重新发送请求
            this.getSearchList(this.searchParams);
        },
    },
    beforeMount() {
        this.initSearchParams();
    },
    mounted() {
        this.getSearchList(this.searchParams);
    },
};
</script>

<style scoped lang="less">
.main {
    margin: 10px 0;
    .py-container {
        width: 1200px;
        margin: 0 auto;
    }
}
</style>
